<template>
  <div class="dashboard">
    <div class="banner">
      <div class="banner-title-box">
        <p class="title">
          Neta-Simulator 智能驾驶仿真平台
        </p>
        <p class="description">
          更安全  更严谨  更高效
        </p>
      </div>
    </div>
    <ul class="card-ul">
      <li class="card-li" v-for="(item,index) in cardData" :key="index">
        <router-link :to="{name:item.pathName}" class="box-card">
            <p class="text" >
              {{ item.czText }}
            </p>
            <span class="text en-text">
              {{ item.enText }}
            </span>
          <img class="deco-img" :src="item.icon"/>
        </router-link>
      </li>
    </ul>
    <ul class="video-ul">
      <li class="video-block">
        <video ref="videoPlayer" webkit-playsinline="" playsinline="" loop="loop" muted="muted" autoplay="autoplay" data-poster="https://new-official-website.oss-cn-hangzhou.aliyuncs.com/static/images/pc/p-7-cover.jpg?t=1" poster="https://new-official-website.oss-cn-hangzhou.aliyuncs.com/static/images/pc/p-7-cover.jpg?t=1" style="background-color: rgb(0, 0, 0); object-fit: cover;"><source src="https://new-official-website.oss-cn-hangzhou.aliyuncs.com/upload/1/cms/content/1672835653252.mp4"></video>      
      </li>
      <li class="video-block">
        <video webkit-playsinline="" playsinline="" loop="loop" muted="muted" autoplay="autoplay" data-poster="https://new-official-website.oss-cn-hangzhou.aliyuncs.com/static/images/pc/p-4-cover.jpg?t=1" poster="https://new-official-website.oss-cn-hangzhou.aliyuncs.com/static/images/pc/p-4-cover.jpg?t=1" style="background-color: rgb(0, 0, 0); object-fit: cover;"><source src="https://new-official-website.oss-cn-hangzhou.aliyuncs.com/upload/1/cms/content/1672835561187.mp4"></video>
      </li>
      <li class="video-block">
        <video webkit-playsinline="" playsinline="" loop="loop" muted="muted" autoplay="autoplay" src="../../assets/video/video_2.mp4"></video>
      </li>
    </ul>
  </div>
</template>

<script>
import indexIcon1 from '@/assets/img/index-icon-1.png';
import indexIcon2 from '@/assets/img/index-icon-2.png';
import indexIcon3 from '@/assets/img/index-icon-3.png';
import indexIcon4 from '@/assets/img/index-icon-4.png';
export default {

  data() {
    return {
      cardData:[
        {
          czText:'语义场景',
          enText: 'Logical Scenario',
          pathName:'Scene',
          icon: indexIcon1
        },
        {
          czText:'测试中心',
          enText: 'BatchRun',
          pathName:'TaskCenter',
          icon: indexIcon2
        },
        {
          czText:'度量结果',
          enText: 'Metric Result',
          pathName:'Metric',
          icon: indexIcon3
        },
        {
          czText:'仿真回放',
          enText: 'DreamView',
          pathName:'',
          icon: indexIcon4
        },
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/vars.scss';
.dashboard {
  width:100%;
  height: 100%;
  .banner{
    width: 100%;
    background-color: #fff;
    background: url('../../assets/img/banner.png') no-repeat;
    background-size: contain;
    aspect-ratio: 287/69;;
    position: relative;
    .banner-title-box{
      position: absolute;
      left: 60px;
      top: calc(50% - 60px);
      color: $black;
      .title{      
        margin-top: 15px;
        font-size:32px;
        font-weight: bold;
        margin-bottom: 20px;
      }
      .description{
        text-align: left;
        font-size:20px;
      }
    }
  }
  // card block
  .card-ul{
    display: flex;
    justify-content: flex-start;
    margin-top: 40px;
    .card-li{
      width: 21.5%;
      margin-right: 4.3%;
      background: #fff;
      box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
      &:nth-child(4n){
        margin-right: 0;
      }
      >a {
        position: relative;
        display: block;
        height: 100%;
        padding-bottom: 12%;
        .text{
          font-size: 20px;
          display: block;
          text-align: center;
          line-height: 1.8;
          color: $black;   
          &:first-child{
            padding-top: 12%;
            font-weight: bold;
          }
        }
        .deco-img{
          width: 100px;
          height: 100px;
          display: block;
          position: absolute;
          top: -30px;
          right: -30px;
        }
      }
    }
  }
  // 视频block
  .video-ul{
    margin-top: 40px;
    display: flex;
    justify-content: flex-start;
    .video-block{
      width:32%;
      aspect-ratio: 16/9;
      margin-right: 2%;
      overflow: hidden;
      video{
        // width: 100%;
        height: 100%;
      }
      &:nth-child(3n){
        margin-right:0;
      }
    }
  }

}
</style>
